<!-- FILE: mcpo_control_panel/ui/templates/base.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}MCP Manager{% endblock %}</title>
    <link
      href="{{ url_for('static', path='fonts/material-icons.css') }}"
      rel="stylesheet"
    >
    <link
      rel="stylesheet"
      href="{{ url_for('static', path='css/vendor/materialize.min.css') }}"
    >
    <link
      rel="stylesheet"
      href="{{ url_for('static', path='/css/style.css') }}"
    >
    <script src="{{ url_for('static', path='js/vendor/htmx.min.js') }}"></script
    >
    <script
      src="{{ url_for('static', path='js/vendor/materialize.min.js') }}"
    ></script>
    <script src="{{ url_for('static', path='/js/main.js') }}" defer></script>
    {% block head_extra %}{% endblock %}
  </head>
  <body>
    <nav class="blue-grey darken-3">
      <div class="nav-wrapper container">
        <a
          href="{{ url_for('ui_root') }}"
          class="brand-logo"
          style="font-size: 1.6rem"
        >
          <i class="material-icons left" style="margin-right: 8px"
          >settings_input_component</i>MCP Manager
        </a>
        <a href="#" data-target="mobile-nav" class="sidenav-trigger"><i
            class="material-icons"
          >menu</i></a>

        <ul class="right hide-on-med-and-down">
          <li>
            <a href="{{ url_for('ui_root') }}"><i class="material-icons left"
              >list</i>Servers & Control</a>
          </li>
          <li>
            <a href="{{ url_for('ui_tools') }}"><i class="material-icons left"
              >widgets</i>Available Tools</a>
          </li>
          <li>
            <a href="{{ url_for('ui_logs') }}"><i class="material-icons left"
              >dvr</i>MCPO Logs</a>
          </li>
          <li>
            <a href="{{ url_for('ui_edit_mcpo_settings_form') }}"><i
                class="material-icons left"
              >settings</i>MCPO Settings</a>
          </li>
          {% if mcpo_settings and not mcpo_settings.manual_config_mode_enabled
          %}
          <li>
            <a href="{{ url_for('ui_add_servers_form') }}"><i
                class="material-icons left"
              >add_circle_outline</i>Add Servers</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </nav>

    <ul class="sidenav blue-grey darken-4 white-text" id="mobile-nav">
      <li>
        <a href="{{ url_for('ui_root') }}" class="white-text"><i
            class="material-icons left white-text"
          >list</i>Servers & Control</a>
      </li>
      <li>
        <a href="{{ url_for('ui_tools') }}" class="white-text"><i
            class="material-icons left white-text"
          >widgets</i>Available Tools</a>
      </li>
      <li>
        <a href="{{ url_for('ui_logs') }}" class="white-text"><i
            class="material-icons left white-text"
          >dvr</i>MCPO Logs</a>
      </li>
      <li>
        <a
          href="{{ url_for('ui_edit_mcpo_settings_form') }}"
          class="white-text"
        ><i class="material-icons left white-text">settings</i>MCPO Settings</a>
      </li>
      {% if mcpo_settings and not mcpo_settings.manual_config_mode_enabled %}
      <li>
        <a href="{{ url_for('ui_add_servers_form') }}" class="white-text"><i
            class="material-icons left white-text"
          >add_circle_outline</i>Add Servers</a>
      </li>
      {% endif %}
    </ul>

    <main class="container" style="margin-top: 20px">
      <h4 class="blue-grey-text text-darken-2">
        {% block page_title %}MCP Servers{% endblock %}
      </h4>
      <p class="grey-text text-darken-1">
        {% block page_subtitle %}Manage MCP server configurations and mcpo
        process{% endblock %}
      </p>
      <div class="divider" style="margin-bottom: 20px"></div>
      {% block content %}{% endblock %}
    </main>

    <footer
      class="page-footer blue-grey darken-2"
      style="margin-top: 40px; padding-top: 20px"
    >
      <div class="footer-copyright blue-grey darken-3">
        <div class="container">
          © {{ now().year if now else '2024' }} MCP Manager
        </div>
      </div>
    </footer>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        M.AutoInit();
        var elemsCollapsible = document.querySelectorAll(
          ".collapsible",
        );
        if (elemsCollapsible.length > 0) {
          M.Collapsible.init(elemsCollapsible);
        }
        var elemsSelect = document.querySelectorAll("select");
        if (elemsSelect.length > 0) M.FormSelect.init(elemsSelect);
        var elemsTooltipped = document.querySelectorAll(".tooltipped");
        if (elemsTooltipped.length > 0) M.Tooltip.init(elemsTooltipped);
        M.updateTextFields();
      });
    </script>
  </body>
</html>
